<template>
  <div class="bArrow absolute">
    <div class="bArrow__s origin-center" :style="styleObj[position].sStyle"></div>
    <div class="bArrow__v" :style="styleObj[position].vStyle"></div>
    <div class="bArrow__h" :style="styleObj[position].hStyle"></div>
  </div>
</template>
<script lang="ts" setup>
import { CSSProperties } from "vue";

const vHeight = 10;
const vWidth = 3;
const sWidth = 12;
const sHeight = 4;

const props = defineProps<{
  position: "leftBottom" | "rightTop";
}>();
const styleObj: Record<
  (typeof props)["position"],
  { vStyle: CSSProperties; hStyle: CSSProperties; sStyle: CSSProperties }
> = {
  leftBottom: {
    vStyle: { top: 0, left: 0 },
    hStyle: { right: 0, bottom: 0 },
    sStyle: { left: 0, top: 10 + (19 - 10 - 3) / 2 - 3 / 2 + "px" },
  },
  rightTop: {
    vStyle: { bottom: 0, right: 0 },
    hStyle: { top: 0, left: 0 },
    sStyle: { right: 0, left: 10 + (19 - 10 - 3) / 2 - 4 / 2 + "px" },
  },
};
</script>
<style lang="less">
.bArrow {
  width: 19px;
  height: 19px;
  > div {
    position: absolute;
    background-color: #00ffff;
  }
}
.bArrow__v {
  width: 3px;
  height: 10px;
}
.bArrow__h {
  height: 3px;
  width: 10px;
}
.bArrow__s {
  width: 12px;
  height: 4px;
  transform: rotate(45deg);
}
</style>
